
@keyframes gradInAnim {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes slideInUpAnim {
    0% {
        visibility: hidden;
        transform: translateY(5%);
        opacity: 0;
    }
    100% {
        visibility: visible;
        transform: translateY(0);
    }
}
@keyframes slideInDownAnim {
    0% {
        visibility: hidden;
        transform: translateY(-5%);
        opacity: 0;
    }
    100% {
        visibility: visible;
        transform: translateY(0);
    }
}
@keyframes slideInBackAnim {
    0% {
        visibility: hidden;
    }
    1% {
        transform: translateY(6%) scale(0.95);
        opacity: 0;
        visibility: visible;
    }
    60% {
        transform: translateY(-4%) scale(1.01);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes rotate90in {
    0% { transform: rotateZ(-90deg); }
    100% { transform: rotateZ(0deg); }
}

@keyframes gradInAnim {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.gradIn {
    animation-duration: 0.3s; /* the duration of the animation */
    animation-timing-function: ease-out; /* how the animation will behave */
    animation-delay: 0s; /* how long to delay the animation from starting */
    animation-iteration-count: 1; /* how many times the animation will play */
    animation-name: gradInAnim; /* the name of the animation we defined above */
}

.slideIn {
    animation-duration: 0.375s; /* the duration of the animation */
    animation-timing-function: ease-out; /* how the animation will behave */
    animation-delay: 0s; /* how long to delay the animation from starting */
    animation-iteration-count: 1; /* how many times the animation will play */
    animation-name: slideInUpAnim; /* the name of the animation we defined above */
}

.slideInFast {
    animation-duration: 0.15s; /* the duration of the animation */
    animation-timing-function: ease-out; /* how the animation will behave */
    animation-delay: 0s; /* how long to delay the animation from starting */
    animation-iteration-count: 1; /* how many times the animation will play */
    animation-name: slideInUpAnim; /* the name of the animation we defined above */
}

.slidInFast {
    animation-duration: 0.15s; /* the duration of the animation */
    animation-timing-function: ease-out; /* how the animation will behave */
    animation-delay: 0s; /* how long to delay the animation from starting */
    animation-iteration-count: 1; /* how many times the animation will play */
    animation-name: slideInUpAnim; /* the name of the animation we defined above */
}

.slideInDown {
    animation-duration: 0.375s; /* the duration of the animation */
    animation-timing-function: ease-out; /* how the animation will behave */
    animation-delay: 0s; /* how long to delay the animation from starting */
    animation-iteration-count: 1; /* how many times the animation will play */
    animation-name: slideInDownAnim; /* the name of the animation we defined above */
}

.slideIn2{
    /* set to hidden so it will not show up before delay */
    animation-duration: 0.375s;
    /* set to backwords so it will not show up before animation */
    animation-fill-mode:backwards;
    animation-timing-function: ease-out;
    /* defined in common.css */
    animation-name: slideInBackAnim;
}

.rotate90in {
    animation-duration: 0.375s; /* the duration of the animation */
    animation-timing-function: ease-out; /* how the animation will behave */
    animation-delay: 0s; /* how long to delay the animation from starting */
    animation-iteration-count: 1; /* how many times the animation will play */
    animation-name: rotate90in; /* the name of the animation we defined above */
}

.hoverMaxout11:hover{
    transform: scale(1.1);
}

.hoverMaxout105:hover{
    transform: scale(1.05);
}

.hoverMaxout103:hover{
    transform: scale(1.03);
}
.hoverMaxout101:hover{
    transform: scale(1.01);
}